<!-- Toast.vue -->
<template>
    <div class="toast" :class="{mmbox: layout.isMobile}">
        {{ message }}
    </div>
</template>

<script lang="ts" setup>
import { useLayout } from '@/stores/layout';
import { ref } from 'vue';
const layout = useLayout();

const props = defineProps({
    message: String
})

</script>

<style lang="less" scoped>
.toast {
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 124;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    // background: rgba(0, 0, 0, 0.4);
    color: #fff;
    margin: auto;

    // border-radius: 4px;
    display: flex;

    width: fit-content;
    min-width: 200px;
    padding: 0 20px;
    height: 90px;
    background: #2b3139;
    border-radius: 4px;
    border: 1px solid #3f454f;

    // &.mmbox {
    //     transform: scale(2);
    // }
}
</style>
